/* List loading */
.mixin-list-loading-frame() {
    0% {
        background: #fff;
    }
    50% {
        background: #3498db;
    }
    90% {
        background: #fff;
    }
}

@-webkit-keyframes list-loading-frame {.mixin-list-loading-frame;}
@-moz-keyframes list-loading-frame {.mixin-list-loading-frame;}
@-ms-keyframes list-loading-frame {.mixin-list-loading-frame;}
@-o-keyframes list-loading-frame {.mixin-list-loading-frame;}
@keyframes list-loading-frame {.mixin-list-loading-frame;}
.hr-list-message-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    display: block;
    width: 30px;
    height: 30px;
    .border-radius(30px);
    .animation-direction(reverse);
    .animation-delay(0s);
    .animation-name(list-loading-frame);
    .animation-duration(6s);
    .animation-timing-function(linear);
    .animation-iteration-count(infinite);
}

.list-movies {
    list-style: none;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
    text-align: center;

    li.movie {
        position: relative;
        width: 250px;
        height: 375px;
        display: inline-block;
        margin: 10px;
        border: 2px solid transparent;
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
        overflow: hidden;

        .cover {
            width: 250px;
            height: 375px;
        }

        .infos {
            .transition(all, .2s);
            position: absolute;
            bottom: -375px;
            left: 0px;
            right: 0px;
            height: 375px;
            padding: 10px;
            text-align: left;
            .box-sizing(border-box);
            color: #fff;
            background: rgba(0, 0, 0, 0.8);

            .title {
                font-weight: 100;
                font-size: 30px;
                display: block;
                height: 60px;
                overflow: hidden;
                margin-bottom: 10px;
            }

            .description {
                font-weight: 200;
                font-size: 18px;
                line-height: 1.3em;
                display: block;
                height: 205px;
                overflow: hidden;
                margin-bottom: 15px;
            }

            a.play {
                background: rgba(0, 0, 0, 0.4);
                height: 62px;
                .box-sizing(border-box);
                padding: 20px 10px;
                color: inherit !important;
                text-decoration: none !important;
                display: block;
                text-align: center;
                text-transform: uppercase;
                font-weight: 100;
                font-size: 22px;
                margin-bottom: 10px;
                position: relative;
                background: #2ecc71;

                &:hover {
                    background: #3498db;
                }
            }
        }

        &.active {
            border-color: #3498db;
            box-shadow: 0px 0px 80px #3498db;

            .infos {
                bottom: 0px;
            }
        }        
    }
}